<template>
	<view class="user">
		<view class="bg_top"></view>
		<view class="picture" @click="goLogin">
			<image :src="userInfo.avatar ? userInfo.avatar :'../../static/image/df_aravat.png'" mode="aspectFill">
			</image>
			<view class="user_name" v-if="userInfo.nickName">
				<view class="nikeName">
					{{ userInfo.nickName }}
				</view>
				<view class="appRole" v-if="userInfo.appRole">
					<image
						:src="userInfo.appRole == 1  ?'../../static/user/user1.png' :userInfo.appRole == 2  ?'../../static/user/user2.png' : userInfo.appRole === 3  ?'../../static/user/user3.png' : ''"
						mode="widthFix" class="appRoleImg">
					</image>
					<view class="appRoleName">
						{{ userInfo.appRole == 1 ?  '寄售' : userInfo.appRole == 2 ?  '学生' : userInfo.appRole == 3 ?  '社会合作方' : '' }}
					</view>
				</view>
				<view class="authentication">
					<image
						:src="userInfo.isStudent == 1  ?'../../static/user/icon9.png' : '../../static/user/icon8.png' "
						mode="widthFix" class="authenticationImg">
					</image>
					<view class="name">
						{{userInfo.isStudent == 1 ? '已认证' : '未认证'}}
					</view>
				</view>

			</view>
			<view class="user_id" v-if="userInfo.id">
				ID:{{userInfo.id}}
			</view>
			<view class="user_name" v-else>登录</view>

		</view>
		<view class="qianbao" @click="goWallet">
			<view class="my">我的钱包</view>
			<view class="disC aic sb">
				<view class="disC aic sb tc">
					<view class="li30">
						<view class="num">{{ userInfo.amount }}</view>
						<view class="name">钱包余额</view>
					</view>
					<view class="li30">
						<view class="num">{{wallet.amount}}</view>
						<view class="name">累计到账</view>
					</view>
					<view class="li30">
						<view class="num">{{wallet.profit}}</view>
						<view class="name">累计收益</view>
					</view>
				</view>
				<view class="btn" @click.stop="goTiXian">立即提现</view>
			</view>
		</view>
		<view class="table_view">
			<view class="li disC aic sb">
				<view class="disC aic sb">
					<view class="jin">今</view>
					<view class="jinname">今日预估</view>
				</view>
				<view class="disC aic sb">
					<view class="tc w100">
						<view class="num">{{cai.day.number}}</view>
						<view class="numname">上传数量</view>
					</view>
					<view class="tc w100">
						<view class="num">{{cai.day.amount}}</view>
						<view class="numname">本金</view>
					</view>
					<view class="tc w100">
						<view class="num">{{cai.day.profit}}</view>
						<view class="numname">收益</view>
					</view>
				</view>
			</view>
			<view class="li disC aic sb">
				<view class="disC aic sb">
					<view class="jin">月</view>
					<view class="jinname">本月预估</view>
				</view>
				<view class="disC aic sb">
					<view class="tc w100">
						<view class="num">{{cai.month.number}}</view>
						<view class="numname">上传数量</view>
					</view>
					<view class="tc w100">
						<view class="num">{{cai.month.amount}}</view>
						<view class="numname">本金</view>
					</view>
					<view class="tc w100">
						<view class="num">{{cai.month.profit}}</view>
						<view class="numname">收益</view>
					</view>
				</view>
			</view>
			<view class="li disC aic sb">
				<view class="disC aic sb">
					<view class="jin">估</view>
					<view class="jinname">预估未结算</view>
				</view>
				<view class="disC aic sb">
					<view class="tc w100">
						<view class="num">{{cai.unsettled.number}}</view>
						<view class="numname">上传数量</view>
					</view>
					<view class="tc w100">
						<view class="num">{{cai.unsettled.amount}}</view>
						<view class="numname">本金</view>
					</view>
					<view class="tc w100">
						<view class="num">{{cai.unsettled.profit}}</view>
						<view class="numname">收益</view>
					</view>
				</view>
			</view>
		</view>
		<view class="seting">
			<view class="tc li" @click="goStatistics">
				<image src="../../static/user/icon2.png" mode="widthFix" class="img">
				</image>
				<view class="imgname">
					数据统计
				</view>
			</view>
			<view class="tc li" @click="goCard">
				<image src="../../static/user/icon3.png" mode="widthFix" class="img">
				</image>
				<view class="imgname">
					订单列表
				</view>
			</view>
			<view class="tc li" @click="junior">
				<image src="../../static/user/icon4.png" mode="widthFix" class="img">
				</image>
				<view class="imgname">
					好友列表
				</view>
			</view>
			<view class="tc li" @click="goInvite">
				<image src="../../static/user/icon7.png" mode="widthFix" class="img">
				</image>
				<view class="imgname">
					邀请好友
				</view>
			</view>
			<view class="tc li" @click="showModal = true">
				<image src="../../static/user/icon6.png" mode="widthFix" class="img">
				</image>
				<view class="imgname">
					在线客服
				</view>
			</view>
			<view class="tc li" @click="goSeting">
				<image src="../../static/user/icon5.png" mode="widthFix" class="img">
				</image>
				<view class="imgname">
					设置中心
				</view>
			</view>
		</view>
		<customerService v-model:visible="showModal" @close="handleClose" />
	</view>


</template>

<script>
	import customerService from '@/compontents/CustomerService.vue'
	import {
		memberLogin,
		getMemberInfo,
		bindInvite,
		homeCount,
		homeWalletCount
	} from '@/api.js'
	export default {
		components: {
			customerService
		},
		data() {
			return {
				userInfo: {},
				showModal: false,
				cai: {
					month: {
						number: 0,
						amount: 0,
						profit: 0
					},
					unsettled: {
						number: 0,
						amount: 0,
						profit: 0
					},
					day: {
						number: 0,
						amount: 0,
						profit: 0
					}
				},
				wallet: {
					amount: 0,
					profit: 0
				}
			};
		},
		onLoad() {
			this.init()
		},
		mounted() {
			let that = this
			uni.$on('refreshIfNeeded', function(data) {
				that.init()
			})
		},
		methods: {
			goCard() {
				uni.switchTab({
					url: '/pages/order/order'
				})

			},
			junior() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/junior/junior'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
					});
				}
			},
			goTiXian() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/Withdrawal/Withdrawal'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
					});
				}
			},
			goWallet() {
				console.log(uni.getStorageSync('token'), 'tokentokentokentoken');
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/wallet/wallet'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
					});
				}

			},
			goInvite() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/invite/invite'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
					});
				}
			},
			goStatistics() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/statistics/statistics'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
					});
				}

			},
			handleClose() {
				this.showModal = false
				console.log('弹窗关闭回调')
			},
			goLogin() {
				if (!uni.getStorageSync('token')) {
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9b3253054a85a97a&redirect_uri=${encodeURIComponent('https://fykq.appldkj.com/#/pages/user/user')}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
				} else {
					this.GetUser()
				}
			},
			// 初始化方法
			async init() {
				let that = this
				if (uni.getStorageSync('token')) {
					this.GetUser()
					return
				}
				let url = window.location.href
				let result = url.replace(new RegExp('#', "g"), "");
				let myUrl = new URL(result)
				let code = myUrl.searchParams.get('code')
				console.log('code', code)
				if (code) {
					// 调用登录方法
					let res = await memberLogin({
						code
					})
					console.log('登录返回结果', res);
					if (res.code === 200 && res.success) {
						const token = res.result.token;
						uni.setStorage({
							key: 'token',
							data: token,
							success: function() {
								console.log('token');
								that.GetUser()
							}
						});
					} else {
						console.error('登录失败，错误信息:', res.message);
					}
				} else {}
			},
			async GetUser() {
				let res = await getMemberInfo({
					// token: uni.getStorageSync('token')
				})
				console.log('用户信息', res);
				this.userInfo = res.result
				uni.setStorage({
					key: 'userInfo',
					data: JSON.stringify(res.result),
					success: function() {}
				});
				this.caiTiao()
				this.walletCount()
				this.Bind()
			},
			async caiTiao() {
				let res = await homeCount({})
				this.cai = res.result
				console.log('caiTiao', res.result);
			},
			async walletCount() {
				let res = await homeWalletCount({})
				this.wallet = res.result
				console.log('walletCount', res.result);
			},



			async Bind() {
				try {
					if (uni.getStorageSync('inviteCode')) {
						let res = await bindInvite(uni.getStorageSync('inviteCode'))
						uni.setStorageSync('inviteCode', '');
					}
				} catch (error) {
					console.log(error);
				}

			},
			goSeting() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/seting/seting'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 2000,
					});
				}

			},
		}
	}
</script>

<style lang="less">
	.user {
		width: 100%;
		height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		background-color: #F3F3F3;
		position: relative;

		.bg_top {
			width: 750rpx;
			height: 521rpx;
			background: linear-gradient(180deg, #07C160 0%, rgba(0, 199, 119, 0.2) 53%, rgba(0, 199, 119, 0) 99%);
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.picture {
		width: calc(100% - 40rpx);
		height: 100rpx;
		margin: 40rpx 50rpx;
		display: flex;
		align-items: center;
		position: absolute;



		image {
			float: left;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.user_id {
			width: 150rpx;
			height: 60rpx;
			background: #0FA255;
			border-radius: 32rpx 0rpx 0rpx 32rpx;
			position: absolute;
			right: 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60rpx;
		}

		.user_name {
			margin-left: 20rpx;
			color: #a7b6cc;
			display: flex;
			flex-wrap: wrap;
			width: 250rpx;

			.nikeName {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-right: 6rpx;

			}

			.authentication {
				width: 151rpx;
				height: 46rpx;
				border-radius: 52rpx 52rpx 52rpx 52rpx;
				border: 1rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				// justify-content: space-around;
				margin-top: 10rpx;

				.authenticationImg {
					width: 26rpx;
					margin: 0 8rpx 0 24rpx;
				}

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.qianbao {
		width: 690rpx;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		position: absolute;
		top: 166rpx;
		left: 30rpx;
		padding: 18rpx 28rpx;
		box-sizing: border-box;

		.li30 {
			width: 150rpx;
			margin-top: 16rpx;

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #E63A32;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #555555;
				margin-top: 8rpx;
			}
		}

		.my {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #000000;


		}

		.btn {
			width: 155rpx;
			height: 64rpx;
			background: #07C160;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 64rpx;
		}
	}

	.table_view {
		width: 690rpx;
		height: 448rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		position: absolute;
		top: 366rpx;
		left: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 30rpx;
		box-sizing: border-box;

		.jin {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;

			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 20rpx 0 30rpx;
		}

		.jinname {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #000000;
		}

		.num {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 22rpx;
			color: #D85950;
		}

		.numname {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #656565;
		}

		.li:nth-child(1) {
			background: linear-gradient(90deg, #C3FCBE 0%, #F9F9F9 100%);

			.jin {
				background: linear-gradient(138deg, #D7FABF 0%, #16C71C 100%);
			}
		}

		.li:nth-child(2) {
			background: linear-gradient(90deg, #FDF1DB 0%, #F9F9F9 100%);

			.jin {
				background: linear-gradient(138deg, #FBB697 0%, #F27033 100%);
			}
		}

		.li:nth-child(3) {
			background: linear-gradient(90deg, #DFD9FD 0%, #F9F9F9 100%);

			.jin {
				background: linear-gradient(138deg, #AB9DF2 0%, #866FFD 100%);
			}
		}

		.li {
			width: 634rpx;
			height: 113rpx;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
		}

	}

	.seting {
		height: 447rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		width: 690rpx;
		position: absolute;
		top: 836rpx;
		left: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 52rpx 60rpx;
		box-sizing: border-box;

		.li {
			width: 33%;

		}

		.img {
			width: 90rpx;
		}

		.imgname {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.ability {
		display: flex;
		justify-content: space-between;
		width: 90%;
		height: 90rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		align-items: center;
	}

	.ability-left {
		display: flex;
		align-items: center;
	}

	.ability-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 25rpx 20rpx;
	}

	.ability-icon:first-of-type {
		width: 50rpx;
		height: 50rpx;
		margin: 25rpx 20rpx;
	}

	.ability_detail {
		font-size: 26rpx;
		color: black;
	}

	.money {
		font-size: 28rpx;

		.money_num {
			color: red;
		}
	}

	.right-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 30rpx 20rpx;
	}

	.appRole {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 101rpx;
		height: 30rpx;
		border-radius: 15rpx;
		background: linear-gradient(90deg, #F97B2B 0%, #FC9F6A 100%);
	}

	.appRole .appRoleImg {
		width: 22rpx;
		margin-right: 10rpx;

	}

	.appRoleName {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.w100 {
		width: 100rpx;
	}
</style>